<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content">

    <link rel="stylesheet" href="/pc/css/single/index.css">
    <div class="breadcrumb-wrap">
        <div class="layui-main clearfix">
            <div class="breadcrumb">
                <!-- <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="20" height="20"><path d="M640 960H384v-320h256v320z m-192-256v192h128v-192z"></path><path d="M512 154.496l-320 320V896h640V474.496l-320-320M512 64l384 384v512H128V448z"></path></svg>  -->
                <a href="/">首页</a> - 单身列表
            </div>
        </div>
    </div>

    <div class="section page-content action_tip_parent">
        <div class="layui-main clearfix">

            <div class="section-left">
                <div class="piece">
                    <div class="head">搜索用户</div>
                    <div class="search-wrap">
                        <form class="layui-form" action="">
                            <div class="layui-form-item gender">
                                <label class="radio-inline c-radio"><input bottlecms-radio type="radio" name="gender" value="1" title="男士" th:checked="${searchModel.gender eq 1}"></label><label class="radio-inline c-radio"><input bottlecms-radio type="radio" name="gender" value="2" title="女士" th:checked="${searchModel.gender eq 2}"></label>
                            </div>

                            <div class="layui-form-item">
                                <input bottlecms-input type="hidden" name="ageRand" th:value="${searchModel.ageRand}"  />
                                <div class="slide-tips age-slide-tips">年龄</div>
                                <div class="age-slide layui-slider"></div>
                            </div>

                            <div class="layui-form-item">
                                <input bottlecms-input type="hidden" name="heightRand" th:value="${searchModel.heightRand}"  />
                                <div class="slide-tips height-slide-tips">身高</div>
                                <div class="layui-slider height-slide "></div>
                            </div>

                            <div class="layui-form-item">
                                <select bottlecms-select name="education">
                                    <option value="">学历</option>
                                    <option th:each="item:${baseEducation}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.education}">
                                    </option>
                                </select>
                            </div>

                            <div class="layui-form-item">
                                <select bottlecms-select name="income">
                                    <option value="">收入</option>
                                    <option th:each="item:${baseIncome}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.income}"></option>
                                </select>

                            </div>

                            <div class="layui-form-item">
                                <select bottlecms-mulselect="categoryDistricts" seluuid="600a7cee84ecb" selindex="0" name="district">
                                    <option value="">所在地（省）</option>
                                    <option th:each="item:${listProvince}" th:value="${item.id}"
                                            th:selected="${item.id eq distrcitProvinceId}"
                                            th:text="${item.name}"></option>
                                </select>
                                <select bottlecms-mulselect="categoryDistricts" seluuid="600a7cee84ecb" selindex="1" name="district">
                                    <option value="">所在地（市）</option>
                                    <option th:each="item:${distrcitListCity}" th:value="${item.id}"
                                            th:selected="${item.id eq distrcitCityId}"
                                            th:text="${item.name}"></option>
                                </select>
                                <select bottlecms-mulselect="categoryDistricts" seluuid="600a7cee84ecb" selindex="2" name="district">
                                    <option value="">所在地（区/县）</option>
                                    <option th:each="item:${distrcitListArea}" th:value="${item.id}"
                                            th:selected="${item.id eq distrcitAreaId}"
                                            th:text="${item.name}"></option>
                                </select>
                            </div>

                            <div class="vipsearch vip" >
                                <div class="tit">
                                    高级筛选
                                    <font color="#F60" size="-1">(仅限VIP)</font>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="marriage">
                                        <option value="">婚姻状况</option>
                                        <option th:each="item:${baseMarriage}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.marriage}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-mulselect="categoryDistricts" seluuid="g0repq4a6hs8n" selindex="0" name="nativePlace">
                                        <option value="">籍贯（省）</option>
                                        <option th:each="item:${listProvince}" th:value="${item.id}"
                                                th:selected="${item.id eq nativeplaceProvinceId}"
                                                th:text="${item.name}"></option>
                                    </select>
                                    <select bottlecms-mulselect="categoryDistricts" seluuid="g0repq4a6hs8n" selindex="1" name="nativePlace">
                                        <option value="">籍贯（市）[[${nativeplaceCityId}]]</option>
                                        <option th:each="item:${nativeplaceListCity}" th:value="${item.id}"
                                                th:selected="${item.id eq nativeplaceCityId}"
                                                th:text="${item.name}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="children" >
                                        <option value="">孩子</option>
                                        <option th:each="item:${baseChildren}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.children}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="constellation">
                                        <option value="">星座</option>
                                        <option value="1" th:selected="${searchModel.constellation eq 1}">水瓶座</option>
                                        <option value="2" th:selected="${searchModel.constellation eq 2}">双鱼座</option>
                                        <option value="3" th:selected="${searchModel.constellation eq 3}">白羊座</option>
                                        <option value="4" th:selected="${searchModel.constellation eq 4}">金牛座</option>
                                        <option value="5" th:selected="${searchModel.constellation eq 5}">双子座</option>
                                        <option value="6" th:selected="${searchModel.constellation eq 6}">巨蟹座</option>
                                        <option value="7" th:selected="${searchModel.constellation eq 7}">狮子座</option>
                                        <option value="8" th:selected="${searchModel.constellation eq 8}">处女座</option>
                                        <option value="9" th:selected="${searchModel.constellation eq 9}">天秤座</option>
                                        <option value="10" th:selected="${searchModel.constellation eq 10}">天蝎座</option>
                                        <option value="11" th:selected="${searchModel.constellation eq 11}">射手座</option>
                                        <option value="12" th:selected="${searchModel.constellation eq 12}">摩羯座</option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="zodiac">
                                        <option value="">生肖</option>
                                        <option value="1" th:selected="${searchModel.zodiac eq 1}">鼠</option>
                                        <option value="2" th:selected="${searchModel.zodiac eq 2}">牛</option>
                                        <option value="3" th:selected="${searchModel.zodiac eq 3}">虎</option>
                                        <option value="4" th:selected="${searchModel.zodiac eq 4}">兔</option>
                                        <option value="5" th:selected="${searchModel.zodiac eq 5}">龙</option>
                                        <option value="6" th:selected="${searchModel.zodiac eq 6}">蛇</option>
                                        <option value="7" th:selected="${searchModel.zodiac eq 7}">马</option>
                                        <option value="8" th:selected="${searchModel.zodiac eq 8}">羊</option>
                                        <option value="9" th:selected="${searchModel.zodiac eq 9}">猴</option>
                                        <option value="10" th:selected="${searchModel.zodiac eq 10}">鸡</option>
                                        <option value="11" th:selected="${searchModel.zodiac eq 11}">狗</option>
                                        <option value="12" th:selected="${searchModel.zodiac eq 12}">猪</option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="marry" >
                                        <option value="">结婚计划</option>
                                        <option th:each="item:${baseMarry}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.marry}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="nationality" >
                                        <option value="">民族</option>
                                        <option th:each="item:${baseNationality}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.nationality}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="industry" >
                                        <option value="">行业</option>
                                        <option th:each="item:${baseIndustry}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.industry}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="house" >
                                        <option value="">房</option>
                                        <option th:each="item:${baseHouse}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.house}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="car" >
                                        <option value="">车</option>
                                        <option th:each="item:${baseCar}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.car}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="familyBackg" >
                                        <option value="">家庭背景</option>
                                        <option th:each="item:${baseFamilybackg}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.familyBackg}"></option>
                                    </select>
                                </div>

                                <div class="layui-form-item">
                                    <select bottlecms-select name="religious" >
                                        <option value="">宗教信仰</option>
                                        <option th:each="item:${baseReligious}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id eq searchModel.religious}"></option>
                                    </select>
                                </div>

                            </div>


                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-default layui-btn-black layui-btn-radius" type="submit" >筛选</button>
                            </div>
                            <div class="layui-form-item">
                                <a class="layui-btn layui-btn-primary layui-btn-radius" href="?" >清除</a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>


            <div class="section-center">

                <!-- s: 排序 -->
                <div class="piece order-warp">

                    <ul class="layui-nav nav">
                        <li class="layui-nav-item" th:classappend="${#strings.isEmpty(searchModel.viewBy)} ? 'layui-this' : '' ">
                            <a href="?">推荐</a>
                        </li>
                        <li class="layui-nav-item" th:classappend="${searchModel.viewBy=='hot'?'layui-this':''}">
                            <a href="?viewBy=hot">人气</a>
                        </li>
                        <li class="layui-nav-item" th:classappend="${searchModel.viewBy=='city'} ? 'layui-this' : '' ">
                            <a href="?viewBy=city">同城</a>
                        </li>
                        <li class="layui-nav-item" th:classappend="${searchModel.viewBy=='auth'} ? 'layui-this' : '' ">
                            <a href="?viewBy=auth">实名</a>
                        </li>
                        <li class="layui-nav-item" th:classappend="${searchModel.viewBy=='vip'} ? 'layui-this' : '' ">
                            <a href="?viewBy=vip">VIP</a>
                        </li>
                    </ul>

                    <div class="spread js-spread" mode="waterfall">

                        <a href="javascript:;" title="切换展示方式" class="modebtn" mode="list"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M887.467 955.733H614.4a68.267 68.267 0 0 1-68.267-68.266V614.4a68.267 68.267 0 0 1 68.267-68.267h273.067a68.267 68.267 0 0 1 68.266 68.267v273.067a68.267 68.267 0 0 1-68.266 68.266z m0-477.866H614.4a68.267 68.267 0 0 1-68.267-68.267V136.533A68.267 68.267 0 0 1 614.4 68.267h273.067a68.267 68.267 0 0 1 68.266 68.266V409.6a68.267 68.267 0 0 1-68.266 68.267zM409.6 955.733H136.533a68.267 68.267 0 0 1-68.266-68.266V614.4a68.267 68.267 0 0 1 68.266-68.267H409.6a68.267 68.267 0 0 1 68.267 68.267v273.067a68.267 68.267 0 0 1-68.267 68.266z m0-477.866H136.533A68.267 68.267 0 0 1 68.267 409.6V136.533a68.267 68.267 0 0 1 68.266-68.266H409.6a68.267 68.267 0 0 1 68.267 68.266V409.6a68.267 68.267 0 0 1-68.267 68.267z"></path></svg></a>

                        <a href="javascript:;" title="切换展示方式" class="modebtn" mode="waterfall"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M125.994667 85.333333a84.522667 84.522667 0 1 0 83.370666 84.522667A83.925333 83.925333 0 0 0 125.994667 85.333333z"></path><path d="M898.602667 86.186667h-524.8a83.669333 83.669333 0 0 0 0 167.338666h524.8a83.669333 83.669333 0 0 0 0-167.338666z"></path><path d="M125.994667 427.52A84.522667 84.522667 0 1 0 209.365333 512a83.882667 83.882667 0 0 0-83.370666-84.48z"></path><path d="M836.693333 428.330667H384.085333a83.712 83.712 0 0 0 0 167.381333H836.693333a83.712 83.712 0 0 0 0-167.381333z"></path><path d="M125.994667 769.664a84.522667 84.522667 0 1 0 83.370666 84.522667 83.925333 83.925333 0 0 0-83.370666-84.522667z"></path><path d="M753.92 770.517333H397.696a83.669333 83.669333 0 0 0 0 167.338667h356.224a83.669333 83.669333 0 0 0 0-167.338667z"></path></svg></svg></a>

                    </div>

                </div>
                <!-- e: 排序 -->

                <!-- s: 列表 -->
                <div class="single-list clearfix js-singles" mode="waterfall">



                    <div class="single-item clearfix" th:each="item,userStat:${data}">
                        <div class="photo-wrap">
                            <a th:href="@{'/single/info/'+${item.userId}}">
                                <img  photo_mode="2" th:lay-src="${item.photo}">
                            </a>
                        </div>
                        <div class="singleinfo">
                            <div class="head">
                                <a class="nickname" th:href="@{'/single/info/'+${item.userId}}">[[${item.nickname}]]</a>

                                <i th:if="${item.gender} eq 1" class="gender_1" title="男士"></i>
                                <i th:if="${item.gender} eq 2" class="gender_2" title="女士"></i>
                                <i th:if="${item.authIdentity} eq 1" class="icon_identity"></i>

<!--                                <i class="icon_usergroup icon_usergroup_2"></i>-->
                                <i th:if="${item.setmealId} gt 0" class="icon_usergroup icon_usergroup_3"></i>
                            </div>

                            <div class="info _text">
                                <span th:if="${item.age}!=null and ${item.age} gt 0">[[${item.age}]]岁</span>
                                <span th:if="${item.height}!=null and ${item.height} gt 0">[[${item.height}]]cm</span>
                                <span th:if="${item.constellationCn}!=null and ${item.constellationCn}!=''">[[${item.constellationCn}]]</span>
                                <span th:if="${item.educationCn}!=null and ${item.educationCn}!=''">[[${item.educationCn}]]</span>
                            </div>
                            <div class="soliloquy _text2" th:if="${item.soliloquy} !=null and ${item.soliloquy}!=''">
                                [[${item.soliloquy}]]
                            </div>

                            <div class="pohtos">
                                他的相册：
                                <a href="@{'/single/info/'+${item.userId}}">
                                    <img class="smooth2" th:lay-src="${item.photo}" />
                                </a>
                            </div>
                        </div>

                        <div class="browse_num">
                            <svg class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <path d="M768 99.84c290.816 0 537.6 167.936 654.848 412.16H1536C1414.656 211.968 1115.648 0 768 0S121.344 211.968 0 512h113.152C230.4 267.776 477.184 99.84 768 99.84z m0 824.32c-290.816 0-537.6-167.936-654.848-412.16H0c121.344 300.032 420.352 512 768 512s646.656-211.968 768-512h-113.152c-117.248 244.224-364.032 412.16-654.848 412.16zM493.056 512c0 152.064 125.44 271.872 274.944 271.872 153.6 0 274.944-123.904 274.944-271.872S917.504 240.128 768 240.128c-153.6 0-274.944 119.808-274.944 271.872z m448.512 0c0 96.256-76.8 172.032-173.568 172.032s-173.568-75.776-173.568-172.032 76.8-172.032 173.568-172.032 173.568 75.776 173.568 172.032z"></path>
                            </svg>
                            [[${item.browse}]]
                        </div>
                        <div class="album_num">
                            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <path d="M876.613818 861.090909a11.636364 11.636364 0 0 0 11.636364-11.636364v-674.90909a11.636364 11.636364 0 0 0-11.636364-11.636364h-721.454545a11.636364 11.636364 0 0 0-11.636364 11.636364v674.90909a11.636364 11.636364 0 0 0 11.636364 11.636364h721.454545z m0 69.818182h-721.454545a81.454545 81.454545 0 0 1-81.454546-81.454546v-674.90909a81.454545 81.454545 0 0 1 81.454546-81.454546h721.454545a81.454545 81.454545 0 0 1 81.454546 81.454546v674.90909a81.454545 81.454545 0 0 1-81.454546 81.454546z"></path>
                                <path d="M129.256727 700.206545l-47.197091-51.432727 182.574546-167.493818a81.454545 81.454545 0 0 1 113.314909 3.072l158.673454 162.327273a11.636364 11.636364 0 0 0 15.965091 0.651636l94.138182-81.803636a81.454545 81.454545 0 0 1 107.822546 0.861091l191.627636 171.962181-46.615273 51.968-191.650909-171.985454a11.636364 11.636364 0 0 0-15.383273-0.116364l-94.138181 81.803637a81.454545 81.454545 0 0 1-111.685819-4.538182l-158.696727-162.327273a11.636364 11.636364 0 0 0-16.174545-0.442182l-182.574546 167.493818z" p-id="8544"></path>
                                <path d="M686.545455 337.454545m-58.181819 0a58.181818 58.181818 0 1 0 116.363637 0 58.181818 58.181818 0 1 0-116.363637 0Z"></path>
                            </svg>
                            [[${item.albumNum}]]
                        </div>

                        <div class="district" th:if="${item.districtCn}!=null and ${item.districtCn} !=''">
                            <svg version="1.1" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" xml:space="preserve">
                                <path class="st0" d="M64,75c-13.8,0-24.3-10.5-24.3-24.3S50.2,26.5,64,26.5S88.3,37,88.3,50.8S77.8,75,64,75z M64,66.9 c8.9,0,16.2-7.3,16.2-16.2c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2C47.8,59.7,55.1,66.9,64,66.9z"/>
                                <path class="st0" d="M64,128C27,99.4,8.8,74.5,8.8,52.7C8.8,20.3,34.8,0,64,0s55.2,20.3,55.2,52.7C119.2,74.5,101,99.4,64,128z M111.3,52.7c0-26.4-20.5-45.2-47.3-45.2S16.7,26.4,16.7,52.7c0,18.1,15.8,39.9,47.3,65.5C95.5,92.6,111.3,70.8,111.3,52.7 L111.3,52.7z"/>
                            </svg>
                            [[${item.districtCn}]]
                        </div>

                        <div class="handle">
                            <button class="layui-btn greet js-greet" title="打招呼" th:data-id="${item.userId}">
                                <i class="icon i icon-greet icon-bottlecms-86"></i>
                                <span>打招呼</span>
                            </button>
                            <button class="layui-btn chat js-chat" title="聊天" th:data-id="${item.userId}">
                                <i class="icon i icon-bottlecms-87"></i>
                                <span>聊天</span>
                            </button>
                            <button class="layui-btn like js-like " title="心动" th:data-id="${item.userId}">
                                <i class="icon i like-icon-off icon-bottlecms-83"></i>
                                <i class="icon i like-icon-on icon-bottlecms-84 hide"></i>
                                <span>心动</span>
                            </button>



                        </div>
                    </div>



                </div>
                <!-- e: 列表 -->

                <!-- s: 分页 -->
                <div class="pagination-wrap" th:utext="${page}">
                </div>
                <!-- e: 分页 -->
            </div>
        </div>
    </div>
</div>
<script layout:fragment="contentFooter" src="/pc/js/single/index.js" type="text/javascript"></script>

</html>